<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>
<body>
    <!-- box-sizing 盒模型 -->
    <!-- 
        content-box  内容区域  width height  默认模式
        border-box 怪异模式 盒模型是内件  width height包括 内容 内边距 边框， 没外边距

        box-sizing: border-box;
        宽高是固定的
    -->

    <!-- 
        边框圆角  border-raidius：x-radius/y-radius
        边框圆角  border-raidius：radius px/%
        单一属性  border-top-left-radius: 半径；  先上下后左右
        简写：类似padding四种值写法
        border-radius：左上角 右上角 右下角 左下角
        三种的话 是对角的两个相同

        /属性值写法 水平方向四个值写法 / 垂直方向四个值写法
        IE8以下不支持 其他浏览器支持
    -->


    <!-- 文字阴影 -->
    <!-- 
        text-shadow 文本应用阴影
        h-shadow 水平位置 允许负值 向右为正 必须写
        v-shadow 垂直位置 允许负值 向下为正 必须写
        blur 模糊
        color 颜色
        text-shadow: 3px 3px 5px #f00;

        多层阴影
        先写的阴影会覆盖后写的阴影 逗号隔开
        text-shadow: 3px 3px 5px #f00. 6px 6px 5px #0f0, 9px 9px 5px #00f;
    -->
    

    <!-- 边框阴影 -->
    <!-- 
        box-shadow  水平 垂直 模糊程度 扩展大小 颜色 是否内边框阴影
        box-shadow: 20px 20px 5px 20px red inset;
        box-shadow: 20px 20px 5px 20px red;
        外部的边框阴影不需要设置 如果增加了outset会出错
        先写的阴影会覆盖后写的阴影
        box-shadow: 20px 20px 5px red, 20px 20px 5px blue, 20px 20px 5px green;

    -->
</body>
</html>